import React from 'react'
import { motion } from 'motion/react'
import Image from 'next/image'
import { assets, experiences } from '../assets/assets'
import { Highlight } from '@/components/ui/hero-highlight'

const About = () => {
  return (
    <motion.div
    initial={{opacity: 0}}
    whileInView={{opacity:1}}
    transition={{duration:1}}
    id='about' className='mt-20 w-full px-[12%] py-10 scroll-mt-20'
    >
      <motion.h2
          initial={{y:-20, opacity: 0}}
          whileInView={{y:0, opacity:1}}
          transition={{duration:0.5, delay:0.3}}      
        className='text-center text-5xl font-RDaKai'>About Me</motion.h2>

      <motion.div
      initial={{opacity: 0}}
      whileInView={{opacity:1}}
      transition={{duration:0.8}}
      className='w-full flex flex-col lg:flex-row items-center gap-20 my-20'>
        <motion.div
        initial={{opacity: 0, scale:0.9}}
        whileInView={{opacity:1, scale:1}}
        transition={{duration:0.6}}
        className='w-64 sm:w-80 rounded-3xl max-w-none'>
          <Image src={assets.my_photo} alt='me' className='w-full rounded-3xl'/>
        </motion.div>

        <motion.div
        initial={{opacity: 0}}
        whileInView={{opacity:1}}
        transition={{duration:0.6, delay:0.8}}
        className='flex-1'>
          <p className='mb-10 max-w-2xl font-RDaKai text-3xl text-black dark:text-white'>
            I am a <Highlight>postgraduate student</Highlight> majoring in <Highlight>CS</Highlight> and currently studying at the School of Computer Science, <Highlight>Chongqing University.</Highlight> Thank you very much for reviewing my resume.
          </p>
          <motion.ul
            initial={{opacity: 0}}
            whileInView={{opacity:1}}
            transition={{duration:0.8, delay:1}}
            className='items-center gap-3 sm:gap-5'>
            {experiences.map((ex, index)=>(
              <motion.li whileHover={{scale:1.1}} className='flex items-center text-2xl' key={index}>
                <p>{ex.time}</p>
                <p className='ml-20'>{ex.unit}</p>
                <p className='ml-auto'>{ex.experience}</p>
              </motion.li>
            ))}
          </motion.ul>
        </motion.div>



      </motion.div>

    </motion.div>
  )
}

export default About
